<template>
  <el-container>
    <el-aside width="230px">
      <el-menu
        default-active=""
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#001529"
        text-color="#fff"
        active-text-color="#ffd04b"
       
        @select="menuClick"> <!--引用传递 -- path路径-->

        <h2 style="margin:0 auto font-size: 1.65rem; margin-top: 14px;">Gok-Admin</h2>
        <el-menu-item index="/home">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="/home" active-text-color="#ffd04b" background-color="#001529">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>系统管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/userCenter">用户中心</el-menu-item>
            <el-menu-item index="/roleManage">角色管理</el-menu-item>
            <el-menu-item index="/menuManage">菜单管理</el-menu-item>
            <el-menu-item index="/departManage">部门管理</el-menu-item>
            <el-menu-item index="/dictionaryMange">字典管理</el-menu-item>
            <el-menu-item index="/messageMent">消息公告</el-menu-item>
          </el-menu-item-group>
          </el-submenu>
        </el-menu>
    </el-aside>
    <el-container>
      <el-header class="d-flex align-items-center" style="background: #545c64;">
        <p class="h5 text-light mb-0 mr-auto">员工信息管理系统</p>
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-avatar size="medium" :src="circleUrl" style="margin-right: 4px;"></el-avatar>
            admin
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-main style="padding: 0;">
        <!-- 面包屑 -->
        <div class="tabs">
          <span class="icons"><i class="el-icon-arrow-left"></i></span>
          <div class="tagRules">
            <el-tag
                :key="tag"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm" >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
          </div>
          <span class="icons"><i class="el-icon-arrow-right"></i></span>
        </div>
        <router-view></router-view>
      </el-main>

    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      circleUrl: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      dynamicTags: ['标签一', '标签二', '标签三'],
      inputVisible: false,
      inputValue: ''
    }
  },
  name: 'layoutIndex',
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //传递-router path路径
    menuClick(index) {
        this.$router.push(index);
    }
  },

    handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    }
</script>

<style lang="less" scoped>
.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #f8f9fa;
  font-size: 18px;
}
.tabs {
  display: flex;
  box-shadow: 0 1px 3px #0000001f, 0 0 3px #0000000a
}
.icons{
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .tagRules {
    height: 30px;
    // overflow-x: hidden;
    flex:1 1 0%
  }

</style>
